<template>
	<view class="common-list">
		<slot name="list"></slot>
		<template v-if="status === 'nomore' && !list.length">
			<slot name="empty"></slot>
		</template>
		<template v-else>
			<u-loadmore margin-top="100" margin-bottom="100" :status="status" @loadmore="loadmore" />
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => [],
			},
			status: {
				type: String,
				default: 'loading',
			},
		},
		watch: {},
		data() {
			return {}
		},
		mounted() {
			uni.$on('onReachBottom', () => {
				this.loadmore()
			})
			uni.$on('onPullDownRefresh', () => {
				this.loadRefresh()
			})
		},
		destroyed() {
			uni.$off('onReachBottom')
			uni.$off('onPullDownRefresh')
		},
		methods: {
			loadmore() {
				if (this.status === 'loadmore') {
					this.$emit('load')
				}
			},
			loadRefresh() {
				this.$emit('refresh')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.common-list {
		.u-load-more-wrap {
			padding-bottom: 100rpx !important;
		}
	}
</style>
